<template>
	<div class="toMcenter">
<div class="tomc" v-for="(item,index) in arr" :key="index" @click="topage(item)" :text="item.text">
	<img :src="item.imgs" alt="" class="img">
	<div class="right" >
		<p>{{ item.text }}</p>
		<span>{{ item.text1 }}</span>
		<span>{{ item.text2 }}</span>
		<span>{{ item.text3 }}</span>
		<img :src="item.img" alt="">
		<span>{{ item.text4 }}</span>
		<span>{{ item.text5 }}</span>
		<p>{{ item.text6 }}</p>
		<span class="span">{{ item.text7 }}</span>
		<span>{{ item.text8 }}</span>
		<p>{{ item.text9 }}</p>
		<span>{{ item.text10 }}</span>
		<span>{{ item.text11 }}</span>
		<span>{{ item.text12 }}</span>
		<span>{{ item.text13 }}</span>
		<span>{{ item.text14 }}</span>
		<p>{{ item.text15 }}</p>
		<span>{{ item.text16 }}</span>
		<span>{{ item.text17 }}</span>
		<span>{{ item.text18 }}</span>
	</div>
</div>
	</div>
</template>

<script>

export default {
	data() { 
		return {
			
			arr: [
				// { imgs: "https://img.alicdn.com/imgextra/i4/6000000004565/O1CN01VVTy4c1jaoqchQjOr_!!6000000004565-2-fliggyimage.png_450x10000Q75.jpg", text: "北京环球度假区", text1: "4.8 分", text2: "很好", text3: "1.2万+点评", img: "https://img.alicdn.com/imgextra/i4/O1CN01CvUj3Z1EjkLHofCXm_!!6000000000388-2-tps-18-28.png", text4: "北京 通州", text5: "距市中心24.1公里", text6: "无需换票", text7: "坐霸天虎过山车", text8: "体验魔法世界", text9: "北京网红打卡榜第一名", text10: "近1个月3万人预订", text11: "¥528", text12: "¥", text13: "502.2", text14: "起", text15: "飞猪优惠", text16: "1张券", text17: "共优惠¥", text18:"25.8" },
				// { imgs: "https://img.alicdn.com/tfscom/TB1Rx5dKUY1gK0jSZFCSuwwqXXa_450x10000Q75.jpg", text: "故宫博物院", text1: "4.9 分", text2: "超棒", text3: "1.7万+点评", img: "https://img.alicdn.com/imgextra/i4/O1CN01CvUj3Z1EjkLHofCXm_!!6000000000388-2-tps-18-28.png", text4: "北京 东城", text5: "距市中心1.8公里", text6: "随时可退", text7: "无须换票", text8: "明清皇宫紫禁城", text9: "北京经典必去榜第一名", text10: "近1个月7164人预订", text11: "¥40", text12: "¥", text13: " 78.5",text15: "飞猪优惠", text16: "1张券", text17: "共优惠¥", text18: "25.8" },
				// { imgs: "https://img.alicdn.com/imgextra/i3/O1CN01N9ARgO1WvLJwd9wuP_!!0-alitrip.jpg_450x10000Q75.jpg", text: "八达岭长城", text1: "4.9 分", text2: "超棒", text3: "9000+点评", img: "https://img.alicdn.com/imgextra/i4/O1CN01CvUj3Z1EjkLHofCXm_!!6000000000388-2-tps-18-28.png", text4: "北京 延庆", text5: "距市中心60.2公里", text6: "极速入园", text7: "可订今日", text8: "登爬好汉坡", text9: "北京赏秋榜第1名", text10: "近1个月7380人预订", text11: "¥40", text12: "¥", text13: " 35", text15: "飞猪优惠", text16: "1张券", text17: "共优惠¥", text18: "25.8" },
				// { imgs: "https://img.alicdn.com/tfscom/TB1dqojDUz1gK0jSZLeSuv9kVXa_450x10000Q75.jpg", text: "北京环球度假区", text1: "4.8 分", text2: "很好", text3: "1.5万+点评", img: "https://img.alicdn.com/imgextra/i4/O1CN01CvUj3Z1EjkLHofCXm_!!6000000000388-2-tps-18-28.png", text4: "北京 海淀", text5: "距市中心15.5公里", text6: "无需换票", text7: "可订今日", text8: "随时可退", text9: "北京人文古迹榜第1名", text10: "近1个月4521人预订", text11: "¥199", text12: "¥", text13: " 134.77", text14: "起", text15: "飞猪优惠", text16: "1张券", text17: "共优惠¥", text18: "55" },
				// { imgs: "https://img.alicdn.com/imgextra/i2/O1CN01FwI8kI22o4hWSqG8a_!!0-alitrip.jpg_450x10000Q75.jpg", text: "北京野生动物园", text1: "4.9 分", text2: "超棒", text3: "6000+点评", img: "https://img.alicdn.com/imgextra/i4/O1CN01CvUj3Z1EjkLHofCXm_!!6000000000388-2-tps-18-28.png", text4: "北京 大兴", text5: "距市中心45.7公里", text6: "无需换票", text7: "随时可退", text8: "萌萌的大熊猫", text9: "北京亲子遛娃榜榜 第3名", text10: "近1个月3948人预订", text11: "¥150", text12: "¥", text13: " 145", text15: "飞猪优惠", text16: "1张券", text17: "共优惠¥", text18: "25.8" },
				// { imgs: "https://img.alicdn.com/imgextra/i3/O1CN01Hj9hLo1xy5NfWvLBU_!!0-travel.jpg_450x10000Q75.jpg", text: "圆明园", text1: "4.8 分", text2: "很好", text3: "4000+点评", img: "https://img.alicdn.com/imgextra/i4/O1CN01CvUj3Z1EjkLHofCXm_!!6000000000388-2-tps-18-28.png", text4: "北京 海淀", text5: "距市中心14.8公里", text6: "无需换票", text7: "极速入园", text8: "万园之园", text9: "北京人文古迹榜第3名", text10: "近1个月2854人预订", text11: "¥100", text12: "¥", text13: " 50", text15: "飞猪优惠", text16: "1张券", text17: "共优惠¥", text18: "50" },
				// { imgs: "https://img.alicdn.com/tfscom/TB1kxhMihPI8KJjSspoSut6MFXa_450x10000Q75.jpg", text: "天坛公园", text1: "4.8 分", text2: "很好", text3: "4000+点评", img: "https://img.alicdn.com/imgextra/i4/O1CN01CvUj3Z1EjkLHofCXm_!!6000000000388-2-tps-18-28.png", text4: "北京 东城", text5: "距市中心2.5公里", text6: "无需换票", text7: "可订今日", text8: "随时可退", text9: "北京地标打卡榜第8名", text10: "近1个月2241人预订", text11: "¥44", text12: "¥", text13: " 39.96", text14: "起", text15: "飞猪优惠", text16: "1张券", text17: "共优惠¥", text18: "5.8" },
				// { imgs: "https://img.alicdn.com/imgextra/i4/O1CN01zZq0Ap1C4PCdnaqhR_!!0-alitrip.jpg_450x10000Q75.jpg", text: "慕田峪长城", text1: "4.9 分", text2: "超棒", text3: "5000+点评", img: "https://img.alicdn.com/imgextra/i4/O1CN01CvUj3Z1EjkLHofCXm_!!6000000000388-2-tps-18-28.png", text4: "北京 怀柔", text5: "距市中心60.0公里", text6: "无需换票", text8: "称为“危岭雄关”", text9: "北京赏秋榜榜第4名", text10: "近1个月946人预订", text11: "¥069", text12: "¥", text13: " 48", text14: "起", text15: "飞猪优惠", text16: "1张券", text17: "共优惠¥", text18: "21" },
				// { imgs: "https://img.alicdn.com/tfscom/TB1C92nFHj1gK0jSZFOSuw7GpXa_450x10000Q75.jpg", text: "恭王府", text1: "4.8 分", text2: "很好", text3: "3000+点评", img: "https://img.alicdn.com/imgextra/i4/O1CN01CvUj3Z1EjkLHofCXm_!!6000000000388-2-tps-18-28.png", text4: "北京 西城.", text5: "距市中心4.1公里", text6: "无需换票", text7: "缩小版故宫", text8: "王府气派非凡", text9: "北京人文古迹榜榜第6名", text10: "近1个月1407人预订", text11: "¥99", text12: "¥", text13: " 88", text14: "起", text15: "飞猪优惠", text16: "1张券", text17: "共优惠¥", text18: "11" },
				// { imgs: "https://img.alicdn.com/imgextra/i2/6000000007800/TB2x9Q0e25TBuNjSspmXXaDRVXa_!!0-mtopupload.jpg_450x10000Q75.jpg", text: "北京欢乐谷", text1: "4.8 分", text2: "很好", text3: "5000+点评", img: "https://img.alicdn.com/imgextra/i4/O1CN01CvUj3Z1EjkLHofCXm_!!6000000000388-2-tps-18-28.png", text4: "北京 朝阳", text5: "距市中心8.5公里", text6: "无需换票", text7: "可订今日", text8: "飞翔式过山车", text9: "北京主题乐园榜榜第3名", text10: "近1个月1780人预订", text11: "¥399", text12: "¥", text13: " 299", text14: "起", text15: "飞猪优惠", text16: "1张券", text17: "共优惠¥", text18: "25.8" },
				// { imgs: "https://img.alicdn.com/imgextra/i3/6000000006820/O1CN01THkoe420FbuE8msHd_!!6000000006820-0-fliggyimage.jpg_450x10000Q75.jpg", text: "北冰古镇", text1: "4.7 分", text2: "很好", text3: "2000+点评", img: "https://img.alicdn.com/imgextra/i4/O1CN01CvUj3Z1EjkLHofCXm_!!6000000000388-2-tps-18-28.png", text4: "北京 密云", text6: "无需换票", text7: "可订今日", text8: "江南水乡建筑", text9: "北京周边自驾榜榜第2名", text10: "近1个月1780人预订", text11: "¥199", text12: "¥", text13: " 140", text14: "起", text15: "飞猪优惠", text16: "1张券", text17: "共优惠¥", text18: "54" },
				// { imgs: "https://img.alicdn.com/tfscom/TB12Ws_h0bJ8KJjy1zjSuuqapXa_450x10000Q75.jpg", text: "北冰古镇", text1: "4.8 分", text2: "很好", text3: "1000+点评", img: "https://img.alicdn.com/imgextra/i4/O1CN01CvUj3Z1EjkLHofCXm_!!6000000000388-2-tps-18-28.png", text4: "北京 东城", text5: "距市中心4.9公里", text6: "无需换票", text7: "随时可退", text8: "融合汉藏风格", text9: "北京地标打卡榜榜第9名", text10: "近1个月850人预订", text12: "¥", text13: " 2", text14: "起", text15: "飞猪优惠", text16: "1张券", text17: "共优惠¥", text18: "2.8" },
			]
		}
	},
	async created() {
		this.$http({
			url: ' http://localhost:3000/sympcent',
			method: "get"
		}).then(res => {
			this.arr = res.data

		})
	},
	methods: {
		topage(item) {
			sessionStorage.setItem('toMcenter', JSON.stringify(item))
			
			this.$router.push(
				{
					path: "/Page",
					query: {
						toMcenter: JSON.stringify(item)
					}
				}
			).catch (err => { })
		},
	// methods: {
	// 	topage(item) {
	// 		this.$router.push('/Page').catch (err => { })
	// 	}
	// 	}
	}
}
</script>

<style scoped>
.toMcenter{
margin: 12px 0;
padding: 0 6px ;
}
.tomc{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-bottom: .15rem;
}
.img{
	width: 2.1rem;
	height: 2.96rem;
	background-color: bisque;
	border-radius: .3rem;
}
.right{
	height: 2.96rem;
	flex: 1;
	margin-left: .15rem;
box-sizing: border-box;
}
.right :nth-child(1){
	font-size: 16px;
	font-weight: 500;
}
.right :nth-child(2){
	font-size: 14px;
	display: block;
	color: orange;
	margin-top: .05rem;
}
.right :nth-child(3){
	color: orange;
	font-size: 12px;
	position: relative;
	left: .65rem;
	top: -0.33rem;
}
.right :nth-child(4){
	color: #5c5f66;
	position: relative;
	left: .7rem;
	top: -0.33rem;
}
.right :nth-child(5){
	width: .18rem;
	height: .26rem;
	position: relative;
	left: -1.6rem;
	top: .06rem;
}
.right :nth-child(6){
	margin-left: -1.5rem;
	color: #5c5f66;
}
.right :nth-child(7){
	color: #5c5f66;
	margin-left: .1rem;
}
.right :nth-child(8){
	width: 1.06rem;
	height: .3rem;
	border: 1px solid green;
	color: green;
	position: relative;
		top: .1rem;
}

.span{
	width: 1.8rem;
	position: relative;
	left: 1.2rem;
	top: -.24rem;
	border: 1px solid green;
		color: green;
}
.right :nth-child(10){
	width: 1.54rem;
	position: relative;
		left: 1.3rem;
		top: -0.24rem;
		color: orange;
		border: 1px solid orange;
}
.right :nth-child(11){
	color: peru;
	margin-top: -0.15rem;
}
.right :nth-child(12){
			color: #919499;
			font-size: 12px;
}
.right :nth-child(13){
	color: #919499;
	font-size: 12px;
	margin-left: 2.3rem;
	position: relative;
	top: -0.4rem;
}
.right :nth-child(14){
	color: red;
	font-size: 12px;
	margin-left: .1rem;
	position: relative;
		top: -0.4rem;
}
.right :nth-child(15){
	font-size: 20px;
	color: red;
	position: relative;
		top: -0.4rem;
}
.right :nth-child(16){
	color: #919499;
	font-size: 12px;
	margin-left: .05rem;
	position: relative;
	top: -0.4rem;
}
.right :nth-child(17){
	margin-left: .77rem;
	color: red;
	position: relative;
	top: -0.2rem;
}
.right :nth-child(18){
	color: red;
	position: relative;
	left: 1.85rem;
	top: -0.5rem;
	border-left: 1px solid red;
	padding:  0 .1rem  0;
}
.right :nth-child(19){
	color: white;
	background-color: red;
	padding: .05rem;
	box-sizing: border-box;
	position: relative;
	left: 1.9rem;
	top: -.55rem;
}
.right :nth-child(20){
	color: white;
		background-color: red;
		padding: .05rem;
			box-sizing: border-box;
			position: relative;
			left: 1.9rem;
			top: -.55rem;
}
</style>